<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- v-once -->
			<!-- // 此时在console中修改app.message = "hahh"第二个不会发生改变 -->
			<h2>{{message}}</h2>
			<h2 v-once>{{message}}</h2>
			
			<!-- v-html -->
			
			<h2>{{url}}</h2>
			<h2 v-html>{{url}}</h2>
			
			<!-- v-text 不够灵活,会覆盖 -->
			<h2>{{text}}</h2>
			<h2 v-text>{{text}}</h2>
		
			<!-- v-pre 不解析 -->
			<h2>{{text}}</h2>
			<h2 v-pre>{{text}}</h2>
			
		</div>
		
		<div id="app2" v-cloak>
			<!-- v-cloak 当vue不解析的时候,避免显示mustache语法 -->
			{{message}}
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊',
					url: "<a href='http://www.baidu.com'>百度一下</a>",
					text : "hello"
				}
			});
			setTimeout(function(){
				const app2 = new Vue({
					el:"#app2",
					data:{
						message:'你好啊'
					}
				});
			},1000);
		</script>
	</body>
</html>
	